<template>
  <div class="fixedNav theme-nav" :data="backgroundColorGet">
      <div class="links">
            <div v-for="(link,index) in sidebarLinks" :key="index" class="nav1" @click.stop="nav1Click(link)">
                <div class="icon">
                    <i :class="link.icon"></i>
                </div>
                <p class="name">{{link.name}}</p>
                <i class="el-icon-plus" v-if="link.pathName === 'Home'"
                    style="fontSize:1.5rem;margin-left: 15px;"
                    @click.stop="addNewPage(link)"></i>
                <div class="btn" v-if="link.child">
                    <i @click.stop="navListHandler(link)" :class="['el-icon-caret-top', {'r180': link.active}]"></i>
                </div>
                <el-collapse-transition>
                    <ul class="nav2List" v-show="link.active">
                        <li v-for="(nav2, i2) in link.child" :key="nav2.name" class="nav2" @click.stop="nav2Click(nav2, link)">
                            <el-input v-if="nav2.name === ''" @blur="blurIpt" @change="changeNewName" class="ipt" size="mini" placeholder="请输入名称" v-model="newPageName" clearable></el-input>
                            <span v-else>{{nav2.name}}</span>
                            <i v-if="link.pathName === 'Home'" @click="removePage(i2)" class="el-icon-circle-close delicon"></i>
                        </li>
                    </ul>
                </el-collapse-transition>
            </div>
      </div>
  </div>
</template>

<script>
// collapse 展开折叠
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue';
import {mapGetters} from 'vuex';

Vue.component(CollapseTransition.name, CollapseTransition);
export default {
    name: 'navBar',
    props: {
        backgroundColor:{
            type: String,
            default: 'green'
        }
    },
    computed: {
        ...mapGetters(['leftWidthGet', 'backgroundColorGet']),
    },
    data() {
        return {
            newPageName: '',
            nav1active: '',
            nav2active: '',
            sidebarLinks:[
                {
                    icon: 'el-icon-s-platform',
                    name: '监控中心',
                    pathName: 'Home',
                    active: false,
                    child: [
                        {
                            name: '我的大屏一',
                            pathName: ''
                        },
                        {
                            name: '我的大屏二',
                            pathName: ''
                        },
                    ]
                },
                {
                    icon: 'el-icon-s-tools',
                    name: '监控指标配置',
                    pathName: 'ChartLayout',
                    active: false,
                    needSetting: true,
                    child: [
                        {
                            name: '图表类型',
                            pathName: 'chartType'
                        },
                        {
                            name: '已配置图表',
                            pathName: 'charts'
                        },
                        {
                            name: '主题',
                            pathName: 'theme'
                        },
                        {
                            name: '其他',
                            pathName: 'other'
                        },
                    ]
                },
            ]
        };
    },
    methods: {
        navListHandler(link) {
            link.active = !link.active;
        },
        nav1Click(link){
            if(link.child) {
                this.navListHandler(link);
            } else {
                this.$store.state.leftWidth = '250px';
                this.$router.push({name: link.pathName});
            }
        },
        nav2Click(nav2, link) {
            console.log(link);
            if (nav2.name === '') return false;
            this.$router.push({
                name: link.pathName,
                params:{
                    Configuration: nav2.pathName || nav2.name
                }
            });
            if (link.pathName === 'Home') {
                this.$api.post('/pagelayout',{name: nav2.name}).then((res) => {
                    console.log(res);
                    this.$store.commit('pageLayoutMut', res.data);
                    console.log(this.$store.state.pageLayout);
                }).catch((err) => {
                    console.log(err);
                });
            }
            if (link.pathName === 'ChartLayout') {
                this.$store.commit('layoutMut', this.$store.state.pageLayout);
                console.log(this.$store.state.layout);
            }
            if (link.needSetting) this.$store.commit('leftWidthMut', '250px');
        },
        changeNewName(newName) {
            let list = this.sidebarLinks[0].child;
            list[list.length - 1].name = newName;
            this.newPageName = '';
        },
        blurIpt() {
            // let list = this.sidebarLinks[0].child;
            // list.splice(list.length-1,1);
        },
        removePage(index) {
            let list = this.sidebarLinks[0].child;
            list.splice(index,1);
        },
        addNewPage(link) {
            let list = this.sidebarLinks[0].child;
            const haveName = list.every(item => item.name !== '');
            if (haveName) {
                const item = {
                    name: '',
                    pathName: ''
                };
                link.child.push(item);
            } else {
                this.$notify({
                    title: '大屏名称不能为空！',
                    duration: 2000,
                    type: 'warning'
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.m-center{
    margin: 0 auto;
}
.opacity0{
    opacity: 0;
}
.fixedNav{
    height: 88%;
    width: 60px;
    z-index: 10;
    margin: {
        top: 80px;
        left: 20px;
    };
    padding-top: 50px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 5px;
    // background: linear-gradient(0deg,#0098f0,#00f2c3);
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 20%), 0 2px 30px 0 rgba(0, 0, 0, 35%);
    transition: all 0.35s;
    overflow-x: hidden;
    overflow-y: hidden;
    &:hover{
        overflow-y: auto;
        width: 250px;
        .tag{
            span,i{
               opacity: 1 !important; 
            }
        }
    }
    /*修改滚动条样式*/
    &::-webkit-scrollbar{
        width:10px;
        height:10px;
    /**/
    }
    &::-webkit-scrollbar-track{
    background: rgba($color: #000000, $alpha: 0);
    border-radius:2px;
    }
    &::-webkit-scrollbar-thumb{
        background: rgba($color: #ccc, $alpha: 0.5);
        border-radius:5px;
    }
    &::-webkit-scrollbar-thumb:hover{
    background: #333;
    }
    &::-webkit-scrollbar-corner{
        background: #179a16;
    }
    .menu-head{
        display: flex;
        overflow: hidden;
        align-items: center;
        margin:0 12px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid hsla(0,0%,100%,.5);
        .tag {
            margin-left: 30px;
            height: 50px;
            line-height: 50px;
            span,i{
                font-size: 2rem;
                transition: all 0.3s;
                opacity: 0;
            }
        }
        i{
            font-size: 3rem;
        }
    }
}
.r180{
    transform: rotate(180deg);
}
.nav1{
    text-align: left;
    box-sizing: border-box;
    width: 250px;
    min-height: 50px;
    color: white;
    position: relative;
    cursor: pointer;
    .icon{
        font-size: 2.5rem;
        margin-right: 20px;
        padding-left: 15px;
    }
    div,p{
        font-size: 2rem;
        display: inline-block;
        margin: 0;
        height: 100%;
        line-height: 50px;
    }
    .btn{
        cursor: pointer;
        font-size: 1.5rem;
        position: absolute;
        right: 10px;
        i{
            transition: all 0.35s;
        }
    }
}
.nav2List{
    // height: 0px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 0 10px inset rgba(82, 82, 82, 0.2);
    .nav2{
        cursor: pointer;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        font-size: 1.5rem;
        line-height: 40px;
        padding-left: 25px;
        position: relative;
        // &:hover{
        //     .delicon{
        //         display: inline-block;
        //     }
        // }
        .delicon{
            // display: none;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 11px;
        }
        .ipt{
            width: 130px;
            font-size: 1.2rem;
            line-height: 40px;
        }
    }
}
</style>